{% extends "../../index.html" %}

{%block page-title %}
    {% if language %}
        {{ language }} paste:
    {% endif %}
    {{ pasty_slug }}

{% endblock %}
{%block h1 %}
    {{ pasty_slug }}
    {% if language %} <small>({{ language }})</small>{% endif %}
{% endblock %}

{% block h1-headers %}
<ul>
    <li><img src="/images/silk/user.png" alt="" width="16" height="16" /> {{ user_name }}</li>
    <li><img src="/images/silk/date.png" alt="" width="16" height="16" /> {{ posted_at }}</li>
    {% if pasty_tags %}
    <li>
        <img src="/images/silk/tag_blue.png" alt="" width="16" height="16" />
        {{ pasty_tags }}
    </li>
    {% endif %}
</ul>
{% endblock %}

{%block page-content %}

{% if u_parent %}
<p class="info">This paste is an edit of <a href="{{ u_parent }}">{{ parent_title }}</a>.</p>
{% endif %}


<p id="paste_info" />

<table>
    <tr>
        <td>
            {% if language %}
            <h2><strong>{{ language }} code</strong></h2>
            {% else %}
            <h2><strong>Code</strong></h2>
            {% endif %}

            <div class="pasty">
                <table>
                    <tr class="snippet">
                        <td>
                            <table class="lines">
                                {{ pasty_lines}}
                                <tr><td><a href="#">Top</a></td></tr>
                            </table>
                        </td>
                        <td style="width:100%;">
                            <table class="code" id="paste_code">{{ pasty_code }}</table>
                        </td>
                    </tr>
                </table>
            </div>
        </td>

        <td style="width:200px;padding:0 0 0 20px;" class="navigation">
            <h2><strong>Toolbox</strong></h2>
            <ul>
                <li>
                    <img src="/images/silk/page_white_edit.png" alt="" width="16" height="16" /> 
                    <a href="{{ u_edit }}"><strong>Edit</strong></a>
                </li>
                <li>
                    <img src="/images/silk/page_white_text.png" alt="" width="16" height="16" /> 
                    <a href="{{ u_raw_text }}">Export as raw text</a>
                </li>
            </ul>
        </td>
    </tr>
</table>

{% if has_replies %}
<h2><strong>Edits</strong> ({{ reply_count }})</h2>
<ul>
    {% for reply in replies %}
    <li><a href="{{ reply.u }}">{{ reply.title }}</a></li>
    {% endfor %}
</ul>
{% endif %}

<h2><strong>Help</strong></h2>
<ul>
    <li><a href="http://code.google.com/p/paste-it/wiki/HighlightLines">Highlighting lines</a></li>
    <li><a href="http://code.google.com/p/paste-it/wiki/ReplaceLines">Replacing lines</a></li>
</ul>

<script type="text/javascript">//<[CDATA[
function replace_line(input)
{
    var txt = input.value;
    var original_txt = input.getAttribute("alt");
    td = input.parentNode;
    if (td != null)
    {
        var txt_node = null;
        if (txt != "")
        {
            txt_node = document.createTextNode(txt);
        }
        else
        {
            txt_node = document.createElement("br");
        }
        td.removeChild(input);
        td.appendChild(txt_node);
        if (txt != original_txt)
        {
            if (td.className == "hl" || td.className == "hl r")
            {
                td.className = "hl r";
            }
            else
            {
                td.className = "r";
            }
            p_info = document.getElementById("paste_info")
            if (p_info != null)
            {
                p_info.className="warning";
                p_info.innerHTML = "You have made some changes to the original paste: <a href=\"javascript:edit_save_changes();\"><strong>Save as another paste</strong></a> | <a href=\"{{ u }}\">Cancel</a>";
            }
        }
    }
}
function edit_key_press(e)
{
    if (e.keyCode == 13) // Enter
    {
        replace_line(e.target);
    }
}

function edit_line(td)
{
    var txt = td.childNodes[0].nodeValue;
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("value", txt);
    input.setAttribute("onblur", "javascript:replace_line(this);");
    input.setAttribute("alt", txt);
    input.onkeypress = edit_key_press;
    td.removeChild(td.childNodes[0]);
    td.appendChild(input);
    input.focus();
}

function edit_get_code()
{
    var s = "";
    var table_code = get_table_code_tbody();
    if (table_code != null)
    {
        for (var i = 0 ; i < table_code.childNodes.length ; ++i)
        {
            var line = table_code.childNodes[i];
            if (line.nodeName == "TR" && line.firstChild != null && line.firstChild.nodeName == "TD")
            {
                txt = line.firstChild.childNodes[0].nodeValue;

                if (txt != null)
                {
                    s += txt;
                    if (i != table_code.childNodes.length - 1)
                    {
                        s += "\n";
                    }
                }
                else
                {
                    s += "\n";
                }

            }
        }
    }
    return s;
}

function edit_save_changes()
{
    nCode = document.createElement("input");
    nCode.setAttribute("id", "code");
    nCode.setAttribute("name", "code");
    nCode.setAttribute("type", "hidden");
    nCode.setAttribute("value", edit_get_code());

    nForm = document.createElement("form");
    nForm.setAttribute("action", "{{ u_edit }}");
    nForm.setAttribute("method", "post");
    nForm.appendChild(nCode);
    document.body.appendChild(nForm);
    nForm.submit();
}

function get_table_code_tbody()
{
    var result = null;
    var table_code = document.getElementById("paste_code");
    if (table_code != null && table_code.childNodes.length >= 1)
    {
        result = table_code.childNodes[0];
    }
    return result;
}

var table_code = get_table_code_tbody();
if (table_code != null)
{
    for (var i = 0 ; i < table_code.childNodes.length ; ++i)
    {
        var line = table_code.childNodes[i];
        if (line.nodeName == "TR" && line.firstChild != null && line.firstChild.nodeName == "TD")
        {
            line.firstChild.setAttribute("ondblclick", "javascript:edit_line(this);");
        }
    }
}
//]]></script>
{% endblock %}
